<template>
  <div class="publish-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form
        :model="articleForm"
        :rules="rules"
        ref="articleForm"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="articleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- <el-input type="textarea" v-model="articleForm.content"></el-input> -->
          <el-tiptap
            v-model="articleForm.content"
            lang="zh"
            height="400"
            :extensions="extensions"
          />
        </el-form-item>
        <el-form-item label="封面" prop="resource">
          <el-radio-group v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <!--
          v-model="articleForm.cover.images[index]" 需要把子组件传递的值绑定到表单对象中，发表文章接口用
          页面中展示的图片应该是有articleForm传递过去的值，必须得用父子组件之间的通讯，
          不能直接由子组件<upload-cover/> 中控制图片，否则在单图，三图切换的时候
          该<upload-cover/>子组件内的数据都被清空了，导致父组件的图片不会显示出来
          -->
          <template v-if="articleForm.cover.type > 0">
            <upload-cover :key="index"
            v-for="(cover, index) in articleForm.cover.type"
            v-model="articleForm.cover.images[index]"
            />
          </template>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="articleForm.channel_id" placeholder="请选择频道">
            <el-option
              :label="channel.name"
              :value="channel.id"
              v-for="channel in channels"
              :key="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publishArticle(false)"
            >发表</el-button
          >
          <el-button @click="publishArticle(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getChannels, publishArticle, getArticleDetail } from "@/api/article";
import UploadCover from './components/upload-cover.vue'
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
} from "element-tiptap";
// import element-tiptap 样式
import "element-tiptap/lib/index.css";

export default {
  name: "Publish",
  components: {
    "el-tiptap": ElementTiptap,
    UploadCover
  },
  data() {
    return {
      articleForm: {
        cover: {
          type: 1,
          images: [],
        },
        channel_id: null,
      },
      rules: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          { min: 5, max: 30, message: "长度在5到30之间", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入文章内容", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value === "<p></p>") {
                callback(new Error("请输入文章内容"));
              } else {
                callback();
              }
            }
          }
        ],
        channel_id: [
          { required: true, message: "请选择频道", trigger: "change" },
        ]
      },
      channels: [], // 频道列表
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline(),
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new Image(),
      ],
    };
  },
  methods: {
    // 获取文章列表
    getArticleChannels() {
      getChannels().then((res) => {
        this.channels = res.data.data.channels;
      });
    },
    // 发表文章 或 存入草稿
    publishArticle(draft) {
      // 校验数据 -- 发送请求
      this.$refs.articleForm.validate((valid) => {
        if (!valid) return;
        publishArticle(this.articleForm, draft).then((res) => {
          if (draft) {
            this.$message.success("文章存为草稿成功，请前往内容管理查看");
          } else {
            this.$message.success("文章发布成功，请前往内容管理查看");
          }
          this.$refs.articleForm.resetFields();
        });
      });
    },
    // 获取指定文章详情
    getArticleDetail(id) {
      getArticleDetail(id).then(res => {
        this.articleForm = res.data.data
      })
    }
  },
  created() {
    // 获取文章列表
    this.getArticleChannels();
    if (this.$route.query.id) {
      this.getArticleDetail(this.$route.query.id)
    }
  },
};
</script>

<style lang="less" scoped>
</style>
